<?php
    require_once "JSSDK.php";
    $jssdk =new JSSDK("wx3659a6f732949f9c","423c2244b671d675311c799789b2778c");
    $signPackage = $jssdk->getSignPackage();
?>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>丽水飞阳美丽中国行-百万好礼大派送</title>
    <meta name="viewport" content="width=device-width,user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <script src="js/jquery-2.1.4.min.js"></script>
    <script src="js/zepto.js"></script>
    <script src="js/common.js"></script>
    <script src="js/swiper.min.js"></script>
    <link rel="stylesheet" href="css/mui.min.css">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/swiper.min.css">
    <link rel="stylesheet" href="css/style.css?v=001">
    <style>

        .mui-preview-image.mui-fullscreen {
            position: fixed;
            z-index: 20;
            background-color: #000;
        }
        .mui-preview-header,
        .mui-preview-footer {
            position: absolute;
            width: 100%;
            left: 0;
            z-index: 10;
        }
        .mui-preview-header {
            height: 44px;
            bottom: 0;
        }
        .mui-preview-footer {
            height: 50px;
            bottom: 0px;
        }
        .mui-preview-header .mui-preview-indicator {
            display: block;
            line-height: 25px;
            color: #fff;
            text-align: center;
            margin: 15px auto 4px;
            width: 70px;
            background-color: rgba(0, 0, 0, 0.4);
            border-radius: 12px;
            font-size: 16px;
        }
        .mui-preview-image {
            display: none;
            -webkit-animation-duration: 0.5s;
            animation-duration: 0.5s;
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
        }
        .mui-preview-image.mui-preview-in {
            -webkit-animation-name: fadeIn;
            animation-name: fadeIn;
        }
        .mui-preview-image.mui-preview-out {
            background: none;
            -webkit-animation-name: fadeOut;
            animation-name: fadeOut;
        }
        .mui-preview-image.mui-preview-out .mui-preview-header,
        .mui-preview-image.mui-preview-out .mui-preview-footer {
            display: none;
        }
        .mui-zoom-scroller {
            position: absolute;
            display: -webkit-box;
            display: -webkit-flex;
            display: flex;
            -webkit-box-align: center;
            -webkit-align-items: center;
            align-items: center;
            -webkit-box-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            left: 0;
            right: 0;
            bottom: 0;
            top: 0;
            width: 100%;
            height: 100%;
            margin: 0;
            -webkit-backface-visibility: hidden;
        }
        .mui-zoom {
            -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
        }
        .mui-slider .mui-slider-group .mui-slider-item img {
            width: auto;
            height: auto;
            max-width: 100%;
            max-height: 100%;
        }
        .mui-android-4-1 .mui-slider .mui-slider-group .mui-slider-item img {
            width: 100%;
        }
        .mui-android-4-1 .mui-slider.mui-preview-image .mui-slider-group .mui-slider-item {
            display: inline-table;
        }
        .mui-android-4-1 .mui-slider.mui-preview-image .mui-zoom-scroller img {
            display: table-cell;
            vertical-align: middle;
        }
        .mui-preview-loading {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            display: none;
        }
        .mui-preview-loading.mui-active {
            display: block;
        }
        .mui-preview-loading .mui-spinner-white {
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -25px;
            margin-top: -25px;
            height: 50px;
            width: 50px;
        }
        .mui-preview-image img.mui-transitioning {
            -webkit-transition: -webkit-transform 0.5s ease, opacity 0.5s ease;
            transition: transform 0.5s ease, opacity 0.5s ease;
        }
        @-webkit-keyframes fadeIn {
            0% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
        }
        @keyframes fadeIn {
            0% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
        }
        @-webkit-keyframes fadeOut {
            0% {
                opacity: 1;
            }
            100% {
                opacity: 0;
            }
        }
        @keyframes fadeOut {
            0% {
                opacity: 1;
            }
            100% {
                opacity: 0;
            }
        }
        p img {
            max-width: 100%;
            height: auto;
        }
        .mui-slider .mui-slider-group .mui-slider-item img {
            width: 86%;
        }


    </style>
</head>
<body>
<div class="index">
    <!-- 顶部人数统计 -->
    <div class="page-content-01">
        <div class="number-people">
            <?php
            $db = new MySQLi("localhost","root","kolin.wina24","vr5913.cn");
            !mysqli_connect_error() or die("连接失败");

            $sql = "SELECT COUNT(*) as number FROM customer";
            $result = $db->query($sql);
            while ($num_rows=mysqli_fetch_array($result))
            {
                echo $num_rows['number'];
                //echo "<strong>$num_rows</strong>";
            }

            ?>
            <span>人</span>
        </div>
    </div>

    <!-- 活动内容开始 -->
    <div class="page-content-02"></div>

    <!-- 惊喜一 -->
    <div class="page-content-03"></div>

    <!-- 惊喜二 -->
    <div class="page-content-04"></div>

    <!-- 抽奖报名 -->
    <div class="page-content-05">
        <a class="return-bottom" href="javascript:;"></a>
    </div>

    <!-- 插图显示 -->
    <div class="page-content-06 clearfix">
        <img class="img-illustration img-banner-01" src="images/banner_01.png" title="插图1" data-preview-src="" data-preview-group="1">
        <img class="img-illustration img-banner-02" src="images/banner_02.png" title="插图2" data-preview-src="" data-preview-group="1">
        <img class="img-illustration img-banner-03" src="images/banner_03.png" title="插图3" data-preview-src="" data-preview-group="1">
        <img class="img-illustration img-banner-04" src="images/banner_04.png" title="插图4" data-preview-src="" data-preview-group="1">
        <img class="img-illustration img-banner-05" src="images/banner_05.png" title="插图5" data-preview-src="" data-preview-group="1">
        <img class="img-illustration img-banner-06" src="images/banner_06.png" title="插图5" data-preview-src="" data-preview-group="1">
        <img class="img-illustration img-banner-07" src="images/banner_07.png" title="插图5" data-preview-src="" data-preview-group="1">
    </div>

    <!-- 用户地址和手机号码 -->
    <div class="page-content-07"></div>

    <!-- 活动倒计时 -->
    <div class="page-content-08">
        <div class="day">
            <span id="day_show"></span>
        </div>
        <div class="time">
            <span class="hour" id="hour_show"></span>
            <span class="minute" id="minute_show"></span>
            <span class="second" id="second_show"></span>
        </div>
    </div>

    <!-- 活动购买记录 -->
    <div class="page-content-09">
        <div class="data-table">
            <table class="table table-striped">
                <caption><span>Top:50</span>活动预订人数</caption>
                <thead>
                <tr>
                    <th width="10%">编号</th>
                    <th width="25%">姓名</th>
                    <th width="30%">联系电话</th>
                    <th width="30%">购买时间</th>
                </tr>
                </thead>
                <tbody>
                <?php
                $db = new MySQLi("localhost","root","kolin.wina24","vr5913.cn");
                !mysqli_connect_error() or die("连接失败");
                $sql = "select * from customer WHERE 1 ORDER BY customer_date DESC";
                $result = $db->query($sql);
                $attr = $result->fetch_all();
                foreach($attr as $v)
                {
                    $sqln = "select * from customer";
                    $rnation = $db ->query($sqln);
                    $attrn = $rnation->fetch_assoc();
                    $phone =substr_replace($v[2],'****',3,4);
                    echo "<tr>
                  <td>{$v[0]}</td>
                  <td>{$v[1]}</td>
                  <td>$phone</td>
                  <td>{$v[3]}</td>
               </tr>";
                }
                ?>
                </tbody>
            </table>
        </div>
    </div>

    <!-- 底部点击报名 -->
    <div class="page-content-10 enroll">
        <a class="enroll-btn" href="reserve.php">我要报名</a>
    </div>

    <!-- 分享按钮开启 -->
    <div class="share_img"></div>

    <!-- 分享二维码 -->
    <div class="share-wrap">
        <a class="close-btn"></a>
        <div class="main_fx">
            <div id="share_txt">
                <p>我正在参加</p>
                <p>“<b>丽水飞阳美丽中国行</b>”</p>
                <p>长按识别二维码马上参加</p>
            </div>
            <div id="share_ma">
                <img src="images/ewm.png">
            </div>
        </div>
    </div>

    <!-- 音乐 -->
    <a href="javascript:void(0);" id="music" class="rotate"></a>
    <audio id="myMusic" autoplay="autoplay" loop>
        <source src="audio/music.mp3" />
    </audio>

</div>
<script src="js/mui.min.js"></script>
<script src="js/mui.zoom.js"></script>
<script src="js/mui.previewimage.js"></script>
<script src="js/layer.js"></script>
<script src="js/index.js?v=001"></script>
<script>
    // 图片查看
    mui.previewImage();

    // 音乐兼容
    //原来是在微信易信执行Ready之前，先注册事件，所以放在所有请求的最前面
    document.addEventListener("WeixinJSBridgeReady", function () {
        audioAutoPlay('myMusic'); //给个全局函数
    }, false);
    document.addEventListener('YixinJSBridgeReady', function () {
        audioAutoPlay('myMusic'); //给个全局函数
    }, false);

    function audioAutoPlay(id) {//全局控制播放函数
        var audio = document.getElementById(id),
            play = function () {
                audio.play();
                document.removeEventListener("touchstart", play, false);
            };
        audio.play();
        document.addEventListener("touchstart", play, false);
    }

    var isAppInside = /micromessenger/i.test(navigator.userAgent.toLowerCase()) || /yixin/i.test(navigator.userAgent.toLowerCase());
    if (!isAppInside) {//给非微信易信浏览器
        audioAutoPlay('myMusic');
    }

    var audio = document.getElementById('myMusic');
    // audio.play();
    $('#music').on('click', function(){
        if (audio.paused){
            audio.play();
            $('#music').addClass('rotate');
        }else{
            audio.pause();
            $('#music').removeClass('rotate');
        }
    });
</script>
</body>
<!--步骤二：引入JS文件  -->
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script>
    //步骤三：通过config接口注入权限验证配置
    wx.config({
        debug: false,
        appId: '<?php echo $signPackage["appId"];?>',
        timestamp: <?php echo $signPackage["timestamp"];?>,
        nonceStr: '<?php echo $signPackage["nonceStr"];?>',
        signature: '<?php echo $signPackage["signature"];?>',
        jsApiList: [
            // 所有要调用的 API 都要加到这个列表中
            'checkJsApi',
            'onMenuShareTimeline',
            'onMenuShareAppMessage'
        ]
    });
</script>
<script type="text/javascript">
    //完成wx.config，执行这里
    wx.ready(function () {
        //分享到朋友圈
        wx.onMenuShareTimeline({
            title: '飞阳美容年度盛典、百万豪礼大派送', // 分享标题
            link:window.location.href,
            imgUrl: "http://quan.7192.com/static/upload/image/20170730/175542122_real.jpg", // 分享图标
            success: function () {
                // 分享成功执行此回调函数
                console.log('success');
               // alert('success');
            },
            cancel: function () {
                console.log('cancel');
               // alert('cancel');
            }
        });

        //分享给朋友
        wx.onMenuShareAppMessage({
            title: '飞阳美容年度盛典、百万豪礼大派送', // 分享标题
            desc: '百万好礼大派送', // 分享描述
            link:window.location.href, //分享的链接
            imgUrl:"http://quan.7192.com/static/upload/image/20170730/175542122_real.jpg", // 分享图标
            trigger: function (res) {
                // 不要尝试在trigger中使用ajax异步请求修改本次分享的内容，因为客户端分享操作是一个同步操作，这时候使用ajax的回包会还没有返回
            },
            success: function (res) {
                // 分享成功执行此回调函数
                console.log('已分享');
                //alert('已分享');
            },
            cancel: function (res) {
                console.log('已取消');
                //alert('已取消');
            },
            fail: function (res) {
                console.log(JSON.stringify(res));
                //alert(JSON.stringify(res));
            }
        });
    });

</script>
</html>